<template>
	<LayoutLockPage />
	<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
	<!-- <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" /> -->
</template>

<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
import { BackTop } from 'ant-design-vue';

import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useDesign } from '@/hooks/web/useDesign';

import { SettingButtonPositionEnum } from '@/enums/appEnum';
import { createAsyncComponent } from '@/utils/createAsyncComponent';

export default defineComponent({
	name: 'LayoutFeatures',
	components: {
		BackTop,
		LayoutLockPage: createAsyncComponent(() => import('@/views/sys/lock/index.vue')),
		// SettingDrawer: createAsyncComponent(() => import('@/layouts/default/setting/index.vue')),
	},
	setup() {
		const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
		const { prefixCls } = useDesign('setting-drawer-fearure');
		const { getShowHeader } = useHeaderSetting();

		const getIsFixedSettingDrawer = computed(() => {
			if (!unref(getShowSettingButton)) {
				return false;
			}
			const settingButtonPosition = unref(getSettingButtonPosition);

			if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
				return !unref(getShowHeader);
			}
			return settingButtonPosition === SettingButtonPositionEnum.FIXED;
		});

		return {
			getTarget: () => document.body,
			getUseOpenBackTop,
			getIsFixedSettingDrawer,
			prefixCls,
		};
	},
});
</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-fearure';

.@{prefix-cls} {
	position: absolute;
	top: 45%;
	right: 0;
	z-index: 10;
	display: flex;
	padding: 10px;
	color: @white;
	cursor: pointer;
	background-color: @primary-color;
	border-radius: 6px 0 0 6px;
	justify-content: center;
	align-items: center;

	svg {
		width: 1em;
		height: 1em;
	}
}
</style>
